<template>
  <x-cell
    v-clickoutside:touchstart="swipeMove"
    @click.native="swipeMove()"
    @touchstart.native="startDrag"
    @touchmove.native="onDrag"
    @touchend.native="endDrag"
    class="mint-cell-swipe"
    :title="title"
    :icon="icon"
    :label="label"
    :to="to"
    :is-link="isLink"
    ref="cell"
    :value="value"
  >
    <div
      slot="left"
      class="mint-cell-swipe-buttongroup"
      ref="left"
    >
      <slot name="swipeLeft">
      </slot>
    </div>
    <slot></slot>

    <div
      slot="right"
      class="mint-cell-swipe-buttongroup"
      ref="right"
    >
      <slot name="swipeRight">
        <a
          class="mint-cell-swipe-button"
          v-for="(btn,index) in left"
          :key="index"
          :style="btn.style"
          @click.prevent.stop="btn.handler && btn.handler(), swipeMove()"
          v-html="btn.content"
        ></a>
      </slot>
    </div>
  </x-cell>
</template>

<script>
import { CellSwipe } from 'mint-ui'
// import 'mint-ui/lib/cell-swipe/style.css'
export default {
  extends: CellSwipe,
  data() {
    return {

    }
  },
  components: {

  },
  methods: {
    translate3d(offset) {
      return `translate(${offset}px, 0)`
    }
  }
}
</script>
<style>
.mint-cell {
  background-color: #fff;
  box-sizing: border-box;
  color: inherit;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.mint-cell-left {
  position: absolute;
  height: 100%;
  left: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  /* -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0); */
}
.mint-cell-right {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  /* -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0); */
}
.mint-cell-swipe .mint-cell-wrapper {
  position: relative;
}
.mint-cell-swipe .mint-cell-wrapper,
.mint-cell-swipe .mint-cell-left,
.mint-cell-swipe .mint-cell-right {
  -webkit-transition: -webkit-transform 150ms ease-in-out;
  transition: -webkit-transform 150ms ease-in-out;
  transition: transform 150ms ease-in-out;
  transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
.mint-cell-swipe-buttongroup {
  height: 100%;
}
.mint-cell-swipe-button {
  height: 100%;
  display: inline-block;
  padding: 0 10px;
  line-height: 48px;
}
</style>
